<template>
    <div class="phone-select-date">
        <el-date-picker
            v-model="phoneValue1"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
        <el-date-picker
            v-model="phoneValue2"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
    </div>
</template>

<script>
    export default {
    name:'PhoneSelectDate',
        data() {
            return {
                pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
                },
                phoneValue1: '',
                phoneValue2: ''
            };
        }
    }
</script>

<style lang="less" scoped>
    .phone-select-date
    {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    @media all and (max-width: 540px)
    {
        .phone-select-date
        {
            width: 100% !important;
            .el-input
            {
                width: 100% !important;
            }
        }
    }
</style>